<template>
  <div style="padding: .56rem .56rem 0;">
                 <news-page-header>关联账号</news-page-header>

    <div class="text">您当前使用的手机号同时关联了1个搜狐帐号：</div>
    <div class="box-border">
      <div class="showAccountDetail">
        <p>
          您使用手机账号
          <span class="nick" style="color:orange" v-if="userIsHere" v-text="sohuUsername"></span>
          <span class="nick" style="color:orange" v-else>狐友</span>
        </p>
        <p> 登录了 <span class="nick">搜狐阅读</span></p>
        <div class="image">
          <img src="http://photo.pic.sohu.com/images/oldblog/person/11111.gif" class="userImg" />
          <span class="betweenLogo"></span>
          <div class="productImgs">
            <img src="https://book.m.sohu.com/apple-touch-icon-precomposed.png" class="productImg" />
          </div>
        </div>
        <div class="marginTop">
          <div style="display: none;">
            <div class="productclass">
              <img
                src="http://photo.pic.sohu.com/images/oldblog/person/11111.gif"
                class="userImg_min"
              />
              <p>狐友 · 搜狐阅读</p>
            </div>
            <div class="assetclass"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import newsPageHeader from "../news/newsPageHeader";

export default {
  data() {
    return {
      userIsHere:false
      ,sohuUsername:''
    };
  },
  components: {
   newsPageHeader
  },
  methods: {},
  computed: {},
  watch: {},
  created() {
    let sohuUsername = localStorage.getItem("sohuUsername");
        this.sohuUsername = sohuUsername;
        if(sohuUsername){
          this.userIsHere=true;
        }else{
          this.userIsHere=false;
        }
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.text {
    font-family: PingFangSC-Regular;
    font-size: .64rem;
    color: rgba(0,0,0,.7);
    letter-spacing: .28px;
    line-height: .72rem;
    margin: .08rem 0 .86rem;
}
 .box-border {
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .38rem;
    margin-bottom: .12rem;
}
 .showAccountDetail {
    background: #fff;
    margin: .52rem .5rem 0;
    overflow: hidden;
    box-sizing: border-box;
}

.showAccountDetail p {
    font-size: .55rem;
    line-height: .55rem;
    vertical-align: middle;
    letter-spacing: .24px;
    color: rgba(0,0,0,.5);
}
.nick {
    font-weight: 700;
    font-family: PingFangSC-Medium;
}
.showAccountDetail .image {
    margin: .12rem 0;
    display: -webkit-flex;
    display: flex;
}
.showAccountDetail .userImg {
    width: 2.44rem;
    height: 2.44rem;
    border-radius: 1.22rem;
    margin: 1.16rem .56rem;
}

.showAccountDetail .productImg {
    width: 2.44rem;
    height: 2.44rem;
    border-radius: 1.22rem;
    margin: 1.16rem .56rem;
}
</style>
